<template>
    <div class="warpper-box">
      <a-alert
      message="请设置园区经营范围，企业开票中类目需要关联经营范围"
      closable show-icon type="info" style="margin-bottom: 10px;display: inline-block;"/>
        <form-create 
        v-model="params.fApi" 
        :rule="params.rule" 
        :option="params.option" 
        @btn-search-click="loadTable(true)"
        @btn-reset-click="reset"/>
        <a-table :columns="table.columns" :pagination="table.pagination" @change="handleTableChange" rowKey="parkId" :data-source="table.loadData">
          <span slot="action" slot-scope="text, record">
            <a @click="addDomain(record)" v-action:categoryEditBtn>编辑</a>
          </span>
          <span slot="managementAreas" slot-scope="text, record">
            <span v-for="items in record.managementAreas" :key="items.id">
               {{ items.itemName | ellipsis}}
             <!--  <a-button type="link" @click="more(scope.row.reason)" v-if="scope.row.reason.length > 18">更多</a-button> -->
            </span>
          </span>
        </a-table>
        <a-modal :title="parkName" :width="640" :visible="visible" :closable="false" :footer="null">
            <a-form-model ref="dynamicValidateForm" :model="dynamicValidateForm">
            <a-form-model-item
              v-for="(domain, index) in dynamicValidateForm.domains"
              :key="domain.key"
              label="经营范围"
              :prop="'domains.' + index + '.value'"
              :rules="{required: true,message: '请输入经营范围',trigger: 'blur'}">
                <a-input v-model="domain.value" placeholder="请输入经营范围" style="width: 60%; margin-right: 8px"/>
                <a-icon
                  v-if="dynamicValidateForm.domains.length > 1"
                  class="dynamic-delete-button"
                  type="minus-circle-o"
                  :disabled="dynamicValidateForm.domains.length === 1"
                  @click="removeDomain(domain)"
                />
            </a-form-model-item>
            <a-form-model-item label="备注">
              <a-input type="textarea" style="width: 90%;" v-model="remark"/>
            </a-form-model-item>
          </a-form-model>
          <div class="ant-modal-footer">
            <a-button type="danger" icon="plus" @click="addDomain(true)">新增</a-button>
            <a-button type="back" @click="visible=false">取消</a-button>
            <a-button type="primary" @click="handleSubmit('dynamicValidateForm')">提交</a-button>
          </div>
        </a-modal>
    </div>
</template>

<script>
import store from '@/store'
import { 
    getSysParkManageRangeList,
    getSysParkManageRangeAdd
} from '@/api/manage/parkRange'
import {
    PARAMS_PARK_RANGE,
    COLUMNS_PARK_RANGE,
    OPTION_BLOCK,
    OPTION_INLINE
} from './modules/form'
export default {
  name: 'parkRange',
  data () {
    return {
      params:{
        fApi:{},
        rule:PARAMS_PARK_RANGE,
        option:OPTION_INLINE
      },
      visible:false,
      parkId:'',
      parkName:'',
      remark:'',
      table:{
        columns:COLUMNS_PARK_RANGE,
        loadData:[],
        pagination:{
          current:1,
          pageSize: 10,
           total:0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      dynamicValidateForm: {
        domains: [],
        remark:''
      }
    }
  },
  filters: {
    ellipsis (value) {
        if (!value) return ''
        if (value.length > 20) {
            return value.slice(0,20) + '...'
        }
        return value
    }
  },
  created () {
    this.loadTable(true);
  },
  methods: {
    async loadTable(flag){
      let params = {};
      if(JSON.stringify(this.params.fApi) !== "{}"){
        params.name = this.params.fApi.getValue('name');
      }
      if(flag){
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const {code,data} = await getSysParkManageRangeList(params);
      if(code ==='1'){
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination){
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    reset(){
      this.params.fApi.resetFields();
      this.loadTable(true);
    },
    async addDomain(rows){
      if(rows === true){
        this.dynamicValidateForm.domains.push({
          value: '',
          key: Date.now(),
          isAdd:true
        });
      }else{
        this.parkId = rows.parkId;
        this.parkName = rows.name;
        this.remark = rows.remark;
        const parkRangeArr = await store.dispatch('getSysParkIdRange',rows.parkId);
        let domains = [];
        
        parkRangeArr && parkRangeArr.forEach(v=>{
          let params = {
            id:v.id,
            value:v.itemName,
            isAdd:false,
          }
          domains.push(params);
        })
        this.dynamicValidateForm.domains = domains;
      }
      this.visible = true;
    },
    removeDomain(item) {
      let index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    handleSubmit(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const { dynamicValidateForm } = this;
          let params = {};
            let items = [];
            dynamicValidateForm.domains.forEach(v => {
              let id = v.isAdd ? '' : v.id;
              items.push({id:id,itemName:v.value})
            });
            params.items = items;
            params.parkId = this.parkId;
            params.remark = this.remark;
            const {code} =  await getSysParkManageRangeAdd(params);
            if(code === '1'){
              this.$message.success('操作成功');
              this.visible = false;
              this.loadTable(false);
            }
          }else{
            return false;
          }
      });
    }
  }
}
</script>
